<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" />
<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="form-group">
    <label for="picture" class="col-sm-2 control-label">首页图片</label>
    <div class="col-sm-10">
        <input type="file" class="form-control" id="picture" name="picture" placeholder="请输入首页显示的图片" required="required" onchange="preview(this)" multiple="multiple">
    </div>
</div>
<div id="preview">
    <!--这个是为了将页面返回的图片展示出来的.默认隐藏-->
    <img style="width: 100px; height: 100px;display:none" id="imgHidden" />
</div>

</body>
<script>
    function preview(file) {
        $("#imgHidden").css("display", "none");
        var prevDiv = document.getElementById('preview');
        if (file.files && file.files[0]) {
            var reader = new FileReader();
            reader.onload = function(evt) {
                prevDiv.innerHTML = '<img style="width: 100px;height: 100px;" src="' + evt.target.result + '" />';
            }
            reader.readAsDataURL(file.files[0]);
        } else {
            prevDiv.innerHTML = '<div class="img" style="width: 100px;height:100px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' +
                file.value + '\'"></div>';
        }
    }
</script>
</html>